<template>
  <div>
    <el-dialog :visible.sync="addEditIsDialog_c" width="130rem !important" @close="resetForm('formName')">
      <div class="nx-content">
        <div class="top-content">
          <el-form :inline="true" ref="formName" :model="searchForm" class="demo-form-inline form">
            <el-form-item label=""><el-input v-model="searchForm.code" placeholder="请输入单号"></el-input></el-form-item>
            <el-form-item label="">
              <el-select v-model="searchForm.fishState" @change="onSubmit" :popper-append-to-body="false"
                placeholder="请选择出鱼状态">
                <el-option label="装鱼中" value="0"></el-option>
                <el-option label="装鱼完成" value="1"></el-option>
                <el-option label="卸鱼完成" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-button type="primary" class="btn" icon="el-icon-search" @click="onSubmit">搜索</el-button>
            <el-button class="btn" @click="reset">重置</el-button>
          </el-form>
        </div>
        <div class="center-box">
          <div class="center-title">&nbsp;调拨单信息</div>
          <div class="right">
            <el-button class="btn" type="primary" @click="handleAdd">新增</el-button>
          </div>
        </div>
        <div class="center-content">
          <NxTablePad :table-cols="tableCols" :table-data="tableData" :pag-ination="pagination" :height="'42.7rem'"
            :isIndex="true" @refresh="refresh" class="table-wrap">
            <template slot="fishState" slot-scope="scope">
              <span v-if="scope.row.fishState == 0">装鱼中</span>
              <span v-if="scope.row.fishState == 1">装鱼完成</span>
              <span v-if="scope.row.fishState == 2">卸鱼完成</span>
            </template>
            <template slot="operation" slot-scope="scope">
              <el-button type="success" class="btn" @click="handleDetail(scope.row, 1)">转入详情</el-button>
              <el-button type="warning" class="btn" @click="handleDetail(scope.row, 0)">转出详情</el-button>
              <el-button type="danger" class="btn" style="background-color: red;"
                @click="delDetail(scope.row)">删除</el-button>
            </template>
          </NxTablePad>
        </div>
      </div>
    </el-dialog>
    <AddAllotDetail :companyId="companyId" :baseId="baseId" :type="type" :carTransferOrderId="carTransferOrderId"
      :fishState="fishState" :addAllotDetailIsDialog="addAllotDetailIsDialog"></AddAllotDetail>
  </div>
</template>
<script type="text/ecmascript-6">
import NxTablePad from "@/components/NxTablePad.vue";
import { Page } from "@/utils/pagination";
import AddAllotDetail from "./addAllotDetail.vue";
import { getDataCarTransferOrderPadList, saveDataCarTransferOrderPadList, delDataCarTransferOrder } from "@/api/allot";
export default {
  components: {
    NxTablePad,
    AddAllotDetail
  },
  props: {
    companyId: {
      type: String,
      default: "",
    },
    baseId: {
      type: String,
      default: "",
    },
    detailId: {
      type: String,
      default: "",
    },
    detailStatus: {
      type: String,
      default: "add",
    },
    detailIsDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      searchForm: {
        // 表单字段
        pageNum: 1,
        pageSize: 10,
        companyId: "",
        carId: "",
        code: "",
        documentStatus: "",
        fishState: "",
      },
      tableCols: [
        {
          label: "车辆调拨单号",
          prop: "code",
          align: "center",
          width: "110",
        },
        {
          label: "出鱼状态",
          slot: "fishState",
          align: "center",
        },
        {
          label: "单兵",
          prop: "workUser",
          align: "center",
        },
        {
          label: "车辆",
          prop: "carNumber",
          align: "center",
        },
        {
          label: "司机",
          prop: "carUser",
          align: "center",
        },
        {
          label: "装鱼日期",
          prop: "workInDate",
          align: "center",
        },
        {
          label: "卸鱼日期",
          prop: "workInDate",
          align: "center",
        },
        {
          label: "起运地",
          prop: "startAddress",
          align: "center",
        },
        {
          label: "上车日期",
          prop: "createDate",
          align: "center",
        },
        // {
        //   label: "备注",
        //   prop: "remark",
        //   align: "center",
        // },
        {
          label: "操作",
          slot: "operation",
          align: "center",
          width: "450",
          fixed: "right",
        },
      ],
      pagination: new Page(),
      tableData: [],
      addEditIsDialog_c: false, // 弹窗是否显示
      addAllotDetailId: '',
      fishState: 0,
      addAllotDetailIsDialog: false,
      type: 0, // 转出/转入
      allotData: {}, // 表头数据
      carTransferOrderId: '', // 车辆调拨单id
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
    };
  },
  watch: {
    detailIsDialog(val) {
      this.addEditIsDialog_c = val;
      if (this.addEditIsDialog_c) {
        if (window.localStorage.getItem("allotData")) {
          this.allotData = JSON.parse(window.localStorage.getItem("allotData"));
        }
        this.searchForm.companyId = this.companyId;
        this.searchForm.baseId = this.baseId;
        this.searchForm.carId = this.detailId;
        this.getList();
      }
    },
  },
  methods: {
    delDetail(row) {
      delDataCarTransferOrder({ id: row.id }).then((res) => {
        if (res.code == 200) {
          this.getList();
        }
      });
    },
    // 查询
    onSubmit() {
      this.pagination.pageNum = 1;
      this.getList();
    },
    // 分页查询
    refresh(val) {
      this.searchForm.pageNum = val.pageNum;
      this.searchForm.pageSize = val.pageSize;
      this.getList();
    },
    // 详情列表
    getList() {
      getDataCarTransferOrderPadList(this.searchForm).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.data;
          this.pagination.count = res.data.total;
        }
      });
    },
    // 提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          createTransferDatas(this.ruleForm).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: res.msg,
              });

              // 关闭弹窗
              this.$parent.closeAddEdit();
              // 刷新列表
              // this.$parent.getControlDeviceGroupUnits();
            }
          });
        }
      });
    },
    // 详情
    handleDetail(row, type) {
      this.type = type;
      this.carTransferOrderId = row.id + '';
      this.fishState = row.fishState;
      this.addAllotDetailIsDialog = true;
    },
    // 新增
    handleAdd() {
      this.$set(this.allotData, "companyId", this.searchForm.companyId);
      if (this.searchForm.carId != this.allotData.carId) {
        this.$notify.error({
          title: "操作失败",
          message: "新增车辆与表头配置车辆不匹配！",
        });
      } else {
        saveDataCarTransferOrderPadList(this.allotData).then((res) => {
          if (res.code == 200) {
            this.$notify({
              title: "操作成功",
              type: "success",
              message: "新增成功！",
            });

            this.getList();
          }
        });
      }
    },
    // 关闭
    closeAddEdit() {
      this.addAllotDetailIsDialog = false;
    },
    // 取消
    reset() {
      this.searchForm = {
        pageNum: 1,
        pageSize: 10,
        companyId: "",
        carId: "",
        code: "",
        documentStatus: "",
        fishState: "",
      };

      this.searchForm.companyId = this.companyId;
      this.searchForm.carId = this.detailId;
      this.onSubmit();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$parent.closeAddEdit();
    },
    // 上一步
    handleBack() {
      this.resetForm();
      this.$parent.closeAddEdit();
    }
  },
};
</script>

<style lang="less" scoped>
/deep/.el-dialog__close {
  font-size: 3.69rem !important;
}

/deep/.el-dialog__headerbtn {
  top: 0.828571rem;
}

/deep/.el-dialog__body {
  font-size: 1.86rem !important;
}

.nx-content {
  width: 100% !important;
  height: 60rem !important;
  display: flex;
  flex-direction: column;
}

// .form {
//   // height: 100%;
// }
.top-content {
  border-radius: 0.5rem;
  width: 100%;
  height: 10%;

  // border: 0.2rem solid #e4eaee;
  // margin-top: 1rem;
  .form {
    .btn {
      font-size: 2.36rem;
    }

    /deep/ .el-form-item {
      padding-left: 0rem;
    }

    /deep/.el-form-item__content {
      width: 22rem;
    }

    /deep/.el-input__inner {
      height: 4.5rem;
      width: 22rem;
      font-size: 1.86rem;
    }

    /deep/ .el-form-item__label {
      font-size: 1.86rem;
      line-height: 3.6rem;
    }

    /deep/.el-input {
      font-size: 1.86rem !important;
    }

    ::v-deep .el-select-dropdown__empty {
      padding: 0.814286rem 3.3rem;
      font-size: 2rem;
    }

    ::v-deep .el-select-dropdown__list {
      .el-select-dropdown__item {
        font-size: 2rem;
        height: 4.428571rem;
        line-height: 4.428571rem;
      }
    }
  }
}

.el-form-item {
  padding-left: 1.5rem;
}

.center-box {
  margin-top: 0.6rem;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border-left: 0.4rem solid #00c187;

  .center-title {
    display: flex;
    align-items: center;
    font-size: 2.36rem;
    font-family: MicrosoftYaHei;
    color: #22262e;
  }

  .btn {
    width: 9.65rem;
    height: 4.38rem;
    font-size: 2.16rem;
  }

  .right {
    display: flex;
    justify-content: center;
    align-items: center;

    .el-button--primary {
      color: #fff;
      background-color: #0067c7;
      border-color: #0067c7;
    }
  }
}

.center-content {
  margin-top: 1rem;
  width: 100%;
  height: 75%;
  border: 0.2rem solid #e4eaee;
  padding-bottom: 1rem;
  border-bottom: 0.2rem solid #ebeff1;

  .btn {
    height: 4.43rem;
    font-size: 1.86rem;
  }

  // 分页按钮适配
  /deep/.btn-prev {
    min-width: 3.642857rem;
    height: 3.642857rem;
    font-size: 3.357143rem;
  }

  /deep/.btn-next {
    min-width: 3.642857rem;
    height: 3.642857rem;
    font-size: 3.357143rem;
  }

  /deep/.el-pagination.is-background .el-pager li {
    min-width: 3.642857rem;
    height: 3.642857rem;
    font-size: 2.357143rem;
    line-height: 4rem;
  }

  /deep/.el-pagination .btn-prev .el-icon {
    font-size: 3.357143rem;
  }

  /deep/.el-pagination .btn-next .el-icon,
  .el-pagination .btn-prev .el-icon {
    font-size: 3.357143rem;
  }

  /deep/.el-pagination__total {
    font-size: 1.928571rem;
    line-height: 4rem;
  }
}
</style>
